<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
			}

			.layui-card-header {
				background: #01AAED;
				color: #fff
			}

			p.title- {
				color: #fff;
				font-size: 16px;
				margin-bottom: 10px
			}

			.layui-form {
				margin-top: 0px;
			}
			
			.layui-table{
				margin : 0px !important;
			}
			.layui-card-body{
				position: relative;
			}
			#pingfen-a{
				position: absolute;
				right:10px;
				bottom: 10px;
				width:80px;
				height:80px
			}
			.info- h3{
				font-size:14px;
				color:#666
			}
			.jhrw > div{
				margin-top:20px;
				display: inline-block;
				width:49%;
				vertical-align: top;
				text-align: center;
				font-size:20px;
			}
			.ywc p{
				color:#009688
			}
			.wwc p{
				color:#FF5722
			}
 			
		</style>
	</head>
	<body>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-xs7">
				<div class="layui-row layui-col-space10 info-">
					<div class="layui-col-xs6">
						<div class="layui-card">
							<div class="layui-card-body" style="height:100px ;">
								<h3>设备状态检测</h3>
								<div class="layui-progress layui-progress-big" style="margin-right:100px;margin-top:30px">
									<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
								</div>
								<div id="pingfen-a">
									biao
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-card">
							<div class="layui-card-body" style="height:100px ;">
								<h3>计划任务</h3>
								<div class="jhrw">
									<div class="ywc">
										<h3>已完成</h3>
										<p>234</p>
									</div>
									<div class="wwc">
										<h3>未完成</h3>
										<p>234</p>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="layui-row layui-col-space10">
					<div class="layui-col-xs12">

						<div class="layui-card">
							<div class="layui-card-header">
								健康状况
							</div>
							<div class="layui-card-body" style="height: 600px;">
								<div class="layui-row layui-col-space10" style="height:100%">
									<div class="layui-col-xs7" style="height:100%">
										<div class="layui-card" style="height:100%;box-shadow: 0 0 1px rgba(0,0,0,0.5);">
											<div id="health" lay-filter="health"></div>
										</div>

									</div>
									<div class="layui-col-xs5" style="height: 600px">
										<div class="layui-card" style="height:100%;box-shadow: 0 0 1px rgba(0,0,0,0.5);">
											<div class="layui-form">
												<table class="layui-table">
													<colgroup>
														<col width="150">
														<col width="150">
														<col>
													</colgroup>
													<thead>
														<tr>
															<th>名称</th>
															<th>描述</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>高压仓</td>
															<td>高压仓压力低于平均值</td>

														</tr>
														<tr>
															<td>阀门</td>
															<td>1号阀门没有关严</td>

														</tr>
														<tr>
															<td>进水口</td>
															<td>进水口压力低于平均值</td>

														</tr>
														<tr>
															<td>出水口</td>
															<td>出水口压力低于平均值</td>

														</tr>
														<tr>
															<td>加压阀</td>
															<td>加压阀没有关闭</td>
														</tr>
														<tr>
															<td>水箱</td>
															<td>水箱容量低于限定值</td>
														</tr>
														
													</tbody>
												</table>
											</div>
											<div>
												<button type="button" id="deal" class="layui-btn">处理</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>


			</div>
			<div class="layui-col-xs5">
				<div class="layui-card">
					<div class="layui-card-header">
						地理信息
					</div>
					<div class="layui-card-body" style="height:400px">
						<div id="map" style="height: 100%;"></div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">
						计划任务
					</div>
					<div class="layui-card-body" style="height:252px">
						<div id="task-plan" lay-filter="task-plan"></div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oSoZAPv0Q3ShlkEDZsZmkg6fvSyhzKCU"> </script>
	<script src="../../js/mapUtils.js"></script>
	<script>
		layui.config({
			base: '../../js/',
		}).extend({ //设定模块别名
			mapControl: 'mapControl'
		});
		layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'jquery', 'mapControl'],
			function() {
				var laydate = layui.laydate //日期
					,
					laypage = layui.laypage //分页
					,
					layer = layui.layer //弹层
					,
					table = layui.table //表格
					,
					carousel = layui.carousel //轮播
					,
					upload = layui.upload //上传
					,
					element = layui.element //元素操作
					,
					slider = layui.slider //滑块
					,
					$ = layui.jquery,
					mapCtrl = layui.mapControl;

				mapCtrl.init();
				//执行一个 table 实例
				table.render({
					elem: '#health',
					url: '../../data/healthList.json' //数据接口
						,
					title: '用户表',
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'id',
								width: 55,
								title: 'ID'
							}, {
								field: 'username',
								title: '泵房名称'
							}, {
								field: 'position',
								title: '健康状况',
								templet: function(r) {
								
								
									var state = r.position;
									if (state <70) {
								
										return "<span  style='color:orange'>"+state +"</span>";
									} else if (state <60) {
										return "<span  style='color:red'>"+state +"</span>";
								
									} else {
										return "<span   style='color:green'>"+state +"</span>";
									}
								
								
								}
								
							}
						]
					]
				});

				table.on('row(health)', function(obj) {
					var data = obj.data;

					layer.alert(JSON.stringify(data), {
						title: '当前行数据：'
					});

					//标注选中样式
					obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
				});

				table.render({
					elem: '#task-plan',
					height : '252',
					url: '../../data/taskPlan.json', //数据接口
					title: '用户表',
					page: false, //开启分页
					toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					cols: [
						[ //表头
							{
								type: 'checkbox',
								fixed: 'left'
							},
							{
								field: 'id',
								width: 55,
								title: 'ID'
							}, {
								field: 'taskname',
								title: '任务名称'
							}, {
								field: 'remark',
								title: '任务描述'
							},
							{
								field: 'time',
								title: '执行时间'
							},
							{
								field: 'activer',
								title: '执行人'
							}
						]
					]
				});

				$("#deal").click(function() {
					layer.open({
						type: 2,
						title: "故障处理", //不显示标题栏
						fix: false, //不固定
						maxmin: false,
						area: ['400px', '450px'],
						shadeClose: true,
						content: "./dealErr.html"
					});
				})

				//监听头工具栏事件
				table.on('toolbar(task-plan)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id),
						data = checkStatus.data; //获取选中的数据
					switch (obj.event) {
						case 'add':
							layer.open({
								type: 2,
								area: ['450px', '450px'],
								fix: false, //不固定
								maxmin: false,
								shadeClose: true,
								title: "计划任务",
								content: "./createPlan.html"
							});
							break;
						case 'update':
							if (data.length === 0) {
								layer.msg('请选择一行');
							} else if (data.length > 1) {
								layer.msg('只能同时编辑一个');
							} else {
								layer.alert('编辑 [id]：' + checkStatus.data[0].id);
							}
							break;
						case 'delete':
							if (data.length === 0) {
								layer.msg('请选择一行');
							} else {
								layer.msg('删除');
							}
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
						,
						layEvent = obj.event; //获得 lay-event 对应的值
					if (layEvent === 'detail') {
						layer.msg('查看操作');
					} else if (layEvent === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if (layEvent === 'edit') {
						layer.msg('编辑操作');
					}
				});

				//执行一个轮播实例
				carousel.render({
					elem: '#test1',
					width: '100%' //设置容器宽度
						,
					height: 200,
					arrow: 'none' //不显示箭头
						,
					anim: 'fade' //切换动画方式
				});

				//将日期直接嵌套在指定容器中
				var dateIns = laydate.render({
					elem: '#laydateDemo',
					position: 'static',
					calendar: true //是否开启公历重要节日
						,
					mark: { //标记重要日子
						'0-10-14': '生日',
						'2018-08-28': '新版',
						'2018-10-08': '神秘'
					},
					done: function(value, date, endDate) {
						if (date.year == 2017 && date.month == 11 && date.date == 30) {
							dateIns.hint('一不小心就月底了呢');
						}
					},
					change: function(value, date, endDate) {
						layer.msg(value)
					}
				});

				//分页
				laypage.render({
					elem: 'pageDemo' //分页容器的id
						,
					count: 100 //总页数
						,
					skin: '#1E9FFF' //自定义选中色值
						//,skip: true //开启跳页
						,
					jump: function(obj, first) {
						if (!first) {
							layer.msg('第' + obj.curr + '页', {
								offset: 'b'
							});
						}
					}
				});

				//上传
				upload.render({
					elem: '#uploadDemo',
					url: '' //上传接口
						,
					done: function(res) {
						console.log(res)
					}
				});

				//滑块
				var sliderInst = slider.render({
					elem: '#sliderDemo',
					input: true //输入框
				});








				var option = {
					color: ['#ccc', '#f00'],
					legend: {
						show: false,
						x: 'center',
						y: 'center',
						data: ['评分']
					},
					
					series: [{
							type: 'pie',
							center: ['50%', '50%'],
							radius: ['70%', '90%'],
							x: '0%', // for funnel
							avoidLabelOverlap: false,
			                startAngle:225,
			                legendHoverLink:false,//禁止鼠标移上去的高亮效果
			                hoverAnimation:false,//禁止移上动画
							itemStyle: {
								normal: {
									label: {
										show:true,
										formatter: function(params) {
											return params.value + '%'
										},
										textStyle: {
											baseline: 'top'
										},
										position: 'center'
									},
									labelLine: {
										show: false
									}
								}
							},
							// label: {
							// 	
							// },
							// labelLine: {
							// 	show: false
							// }
							data: [{
									name: 'other',
									value: 46,
									label: {
										
											show: true,
											position: 'center',
											textStyle: {
												baseline: 'top',
												color:'rgba(0,0,0,0)'
											},
										
									},
								},
								{
									name: '评分',
									value: 54,
									itemStyle: {
										
										label: {
											
												show: true,
												position: 'center',
												textStyle: {
													baseline: 'top',
													color:'#f00'
												},
											
										},
										

									},
								}
							]
						},

					]
				};
				var myChart = echarts.init(document.getElementById('pingfen-a'));
				myChart.setOption(option);



			});
	</script>
</html>
